<!--
 * @FilePath: src/views/Dashboard/MicrofaciesAnalysis.vue
 * @Description: MicrofaciesAnalysis.vue
-->
<template>
  <div class="mes-microfacies-analysis echart-dashbaord">
    <div ref="chart" class="echart-container"></div>
  </div>
</template>

<script>
import chart_mixin from "./chart-mixin.js"
export default {
  name: "MicrofaciesAnalysis",
  mixins: [chart_mixin],
  data() {
    return {}
  },
  mounted() {
    this.$nextTick().then(this.initialize).then(this.renderEchart)
  },
  methods: {
    renderEchart() {
      const option = {
        parallelAxis: [
          { dim: 0, name: "Price" },
          { dim: 1, name: "Net Weight" },
          { dim: 2, name: "Amount" },
          {
            dim: 3,
            name: "Score",
            type: "category",
            data: ["Excellent", "Good", "OK", "Bad"]
          }
        ],
        series: {
          type: "parallel",
          lineStyle: {
            width: 4
          },
          data: [
            [12.99, 100, 82, "Good"],
            [9.99, 80, 77, "OK"],
            [20, 120, 60, "Excellent"]
          ]
        }
      }
      this.chart.setOption(option)
    }
  }
}
</script>
<style scoped>
.echart-dashbaord {
  padding: 1rem;
}
.echart-container {
  width: 100%;
  min-height: 500px;
}
</style>
